<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PocketMine服务器管理器</title>
    <!-- PMS Design -->
    <link rel="stylesheet" href="css/psm.css">
    <link rel="stylesheet" href="css/icon.css">
    <link rel="stylesheet" href="css/roboto.css">
    <!-- Material Design -->
    <link rel="stylesheet" href="../node_modules/material-components-web/dist/material-components-web.css">
</head>


<!-- Starting body -->

<body class="mdc-typography" style="overflow: hidden;">
    <!-- Menu -->
    <header class="mdc-toolbar mdc-toolbar--fixed demo-header-toolbar">
        <div class="mdc-toolbar__row">
            <!-- Header row -->
            <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
                <span class="catalog-back">
					<a id="main-logo" class="unclickable mdl-layout__drawer-button mdc-toolbar__icon--menu" role="button" tabindex="0" target="frame"><i class="material-icons">home</i></a>
				</span>
                <section class="mdc-toolbar__section">
                    <span class="mdc-toolbar__title catalog-title">PocketMine服务器管理器</span>
                </section>
                <section class="mdc-toolbar__section mdc-toolbar__section--align-end">
                    <span id="open_menu" class="mdc-ripple-upgraded material-icons mdc-toolbar__icon mdc-ripple-surface __icon clickable windowButton" aria-label="Actions" alt="Actions">more_vert</span>
                    <span id="fullscreenBtn" class="mdc-ripple-upgraded material-icons mdc-toolbar__icon mdc-ripple-surface __icon clickable windowButton" aria-label="Maximize" alt="Maximize">fullscreen</span>
                    <span id="minimizeBtn" class="mdc-ripple-upgraded material-icons mdc-toolbar__icon mdc-ripple-surface __icon clickable windowButton" aria-label="Minimize" alt="Minimize">remove</span>
                    <span id="closeBtn" class="mdc-ripple-upgraded material-icons mdc-toolbar__icon mdc-ripple-surface __icon clickable windowButton" aria-label="Close window" alt="Close window">clear</span>
                </section>
                <!--Menu Actions-->
                <div class="mdc-simple-menu mdc-simple-menu--open-from-top-right" id="menu1" tabindex="-1">
                    <ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
                        <li class="mdc-list-item" role="menuitem" tabindex="0" id="addServerOpen">添加服务器</li>
                        <li class="mdc-list-item" role="menuitem" tabindex="0" id="modifyServerBtn">修改服务器</li>
                        <li class="mdc-list-item" role="menuitem" tabindex="0" id="exitPSM">推出PocketMine服务器管理器</li>
                    </ul>
                </div>
        </div>
    </header>


    <!-- Page Contents -->
    <main>
        <!-- Page content -->
        <iframe src="serverPicker.html" frameborder=0 id="frame" name="frame"></iframe>
    </main>


    <!-- Creating server dialog -->
    <aside id="createServerDialog" class="mdc-dialog" data-mdc-auto-init="MDCDialog" role="alertdialog" aria-labelledby="addServerTitle" aria-describedby="addServerBody">
        <div class="mdc-dialog__surface">
            <header class="mdc-dialog__header">
                <h2 id="addServerTitle" class="mdc-dialog__header__title">
                    创建PocketMine服务器
                </h2>
            </header>
            <section class="mdc-dialog__body" id="addServerBody">
                <!-- Dialog content -->
                <form id="addServerForm">
                    <!-- Name -->
                    <div class="mdc-textfield mdc-textfield--upgraded">
                        <input type="text" id="serverName" class="mdc-textfield__input" pattern="^[\w\-\._]+$" />
                        <label class="mdc-textfield__label" for="serverName">服务器名称</label>
                    </div>
                    <br>
                    <!-- Server port -->
                    <div class="mdc-textfield mdc-textfield--upgraded">
                        <input class="mdc-textfield__input" type="number" id="serverPort" value="" />
                        <label class="mdc-textfield__label mdc-textfield__label--float-above" for="serverPort">端口</label>
                    </div>
                    <br>
                    <!--Version-->
                    <div class="mdc-select" role="listbox" tabindex="0">
                        <span class="mdc-select__selected-text" id="basedText">支持MCPE版本</span>
                        <div class="mdc-simple-menu mdc-select__menu" id="addServerVersion">
                            <ul class="mdc-list mdc-simple-menu__items" id="versionList">
                            </ul>
                        </div>
                    </div>
                </form>
            </section>
            <footer class="mdc-dialog__footer">
                <button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--cancel" data-mdc-auto-init="MDCRipple">Close</button>
                <butotn type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--accept" data-mdc-auto-init="MDCRipple">Create server</button>
            </footer>
        </div>
        <div class="mdc-dialog__backdrop"></div>
    </aside>


    <!-- Snackbar -->
    <div class="mdc-snackbar" id="formError" aria-live="assertive" aria-atomic="true" aria-hidden="true" data-mdc-auto-init="MDCSnackbar">
        <div class="mdc-snackbar__text" id="formErrorMessage"></div>
        <div class="mdc-snackbar__action-wrapper">
            <button type="button" class="mdc-button mdc-snackbar__action-button">取消</button>
        </div>
    </div>
</body>

<script>
    require("./js/index.js");
</script>

</html>